<template>
  <div
    class="cellBox"
    :class="{
      left: formParams.labelPosition == 'left',
      top: formParams.labelPosition == 'top',
    }"
  >
    <div class="label" :style="{ width: formParams.labelWidth }">
      <span v-if="childData.isRequired" style="color: #ec1c24">*</span>
      {{ childData.labelText }}
    </div>
    <el-select
      v-model="childData.value"
      :size="formParams.size"
      :placeholder="childData.placeholder"
      :disabled="formParams.disabled||childData.disabled"
      :filterable="childData.orderParam.isFilterable"
      :clearable="childData.orderParam.isClearable"
      multiple
      collapse-tags
      class="value"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>
 
<script setup>
const props = defineProps({
  childData: {
    type: Object,
    default: () => {}
  },
  formParams: {
    type: Object,
    default: () => {}
  }
});

const options = ref([
  {
    value: "1",
    label: "选项一"
  },
  {
    value: "2",
    label: "选项二"
  },
  {
    value: "3",
    label: "选项三"
  }
]);
</script>

<style scoped>
.cellBox {
  display: flex;
}
.left {
  justify-content: flex-start;
}
.top {
  flex-direction: column;
}
.top .label {
  padding-bottom: 5px;
}
.label {
  text-align: left;
}
</style>
